<template>
    <div class='user'>
        user页面
        <div class="wrapper">
            <button @click="goPosts">posts</button>
            <button @click="goProfiles">profiles</button>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {

        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    beforeRouteUpdate(to, from, next) {
    console.log('toupdateuser', to);
    console.log('fromupdateuser', from);
    next()
  },
  watch:{
    $route(to, from) {
      console.log('3333',to);
      console.log('4444',from);
    }
  },
    //方法集合
    methods: {
        goPosts() {
            // this.$router.push('/user/posts')
            this.$router.push({path:'/user/posts'})
            // this.$router.push({name:'UserPosts'})
        },
        goProfiles() {
            // this.$router.push('/user/profile')
            this.$router.push({path:'/user/profile'})
            // this.$router.push({name:'UserProfile'})
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
}
</script>
<style scoped>
.wrapper {
    margin-top: 100px;
}
</style>